<template>
	<view class="container">
		<view class="status_bar"></view>
		<scroll-view class="body" scroll-y="true">
			<!-- <view v-for="(item, index) in list" :key="index" @click="toDetail(index)" class="card list flex-row">
				<view class="left">{{ index+1 }}</view>
				<view class="center" :class="{error: !item.checked}">{{ item.content }}</view>
				<view class="right">
					<uni-icons v-if="item.is_photo && !item.pics" type="camera" size="26" color="#5F96F2"></uni-icons>
					<image v-if="item.is_photo && item.pics" :src="item.pics.split(',')[0]"></image>
					<uni-icons v-if="!item.is_photo && item.checked" type="checkbox" size="30" color="#5F96F2"></uni-icons>
					<uni-icons v-if="!item.is_photo && !item.checked" type="circle" size="30" color="#ccc"></uni-icons>
				</view>
			</view> -->
			<view v-for="(item, index) in list" :key="index" @click="toDetail(index)" class="card list flex-row">
				<view class="left">{{ index+1 }}</view>
				<view v-if="item.is_photo" class="center" :class="{error: !item.checked, red: item.detail_list && [2,3].includes(item.detail_list.check_static)}">{{ item.content }}</view>
				<view v-else class="center" :class="{error: !item.checked}">{{ item.content }}</view>
				<view class="right">
					<uni-icons v-if="item.is_photo && (!item.detail_list || !item.detail_list.pics)" type="camera" size="26" color="#5F96F2"></uni-icons>
					<image v-if="item.is_photo && item.detail_list && item.detail_list.pics" :src="item.detail_list.pics.split(',')[0]"></image>
					<uni-icons v-if="!item.is_photo && item.checked && [1,4].includes(item.detail_list.check_static)" type="checkbox" size="30" color="#5F96F2"></uni-icons>
					<uni-icons v-if="!item.is_photo && item.checked && [2,3].includes(item.detail_list.check_static)" type="close" size="30" color="red"></uni-icons>
					<uni-icons v-if="!item.is_photo && !item.checked" type="circle" size="30" color="#ccc"></uni-icons>
				</view>
			</view>
			<!--巡检情况-->
			<view class="card">
				<view class="title">
					<view class="name">巡检情况</view>
				</view>
				<view class="item">
					<textarea v-model="content" placeholder="巡检情况" />
				</view>
				<view class="title">
					<view class="name">巡检视图 <text class="require">*</text></view>
				</view>
				<view class="item">
					<upload @upload="uploadPic" @delete="delPic" :count="3"></upload>
				</view>
			</view>
			<view class="btns">
				<view @click="submit" class="btn">上传巡检数据</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import upload from '@/components/upload/index.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { date } from '@/common/function.js';
export default{
	components: { upload,uniIcons },
	data(){
		return {
			id: '',
			list: [],
			form: {},
			content: '',
			pics: []
		}
	},
	onLoad(option){
		this.id = option.id
		if(this.list.length == 0) this.getList(this.id);
	},
	onShow(){
		this.list = uni.getStorageSync('riskHandleHandleInspectList') || [];
	},
	methods: {
		toDetail(index){
			uni.removeStorageSync('riskHandleHandleInspectList');
			uni.setStorageSync('riskHandleHandleInspectList', this.list);
			uni.navigateTo({url: 'riskHandleCheckDetail?index='+index});
		},
		submit(){
			if(this.pics.length == 0)
				return uni.showToast({icon: 'none', title: '请上传巡检视图'});
			
			// 判断是否全部检查完毕
			for(let i=0,l=this.list.length; i<l; i++){
				if(!this.list[i].checked){
					return uni.showToast({icon: 'none', title: '请完成所有巡检项'});
				}
			}
			
			// 判断是否全部为已巡检无隐患状态
			let check_status = 0
			let detail_list = []
			for(let i=0,l=this.list.length; i<l; i++){
				detail_list.push(this.list[i].detail_list);
				
				if(this.list[i].detail_list.check_static){
					check_status = 1;
				}
			}
			
			// 组合数据
			let form = {
				id: this.id,
				to_user: uni.getStorageSync('userid'),
				recive_sign: '',
				check_status: check_status,
				detail_list: detail_list
			};
			uni.setStorageSync('riskDangerHandleData', form);
			uni.navigateBack();
			return;
			
			uni.showLoading({ title: '加载中' })
			uni.request({
				method: 'POST',
				url: this.$API.riskHandleReceive,
				data: {
					id: this.id,
					to_user: uni.getStorageSync('userid'),
					check_content: JSON.stringify(check_content)
				},
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.navigateBack();
					}
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({icon: 'none', title: '提交失败'});
				}
			})
		},
		delPic(res){
			this.pics = this.pics.filter((item,idx)=>res.index != idx);
		},
		uploadPic(res){
			let _this = this;
			res.temps.forEach(function(item,index){
				uni.uploadFile({
					url: _this.$API.upload,
					name: 'file',
					filePath: item,
					success: function(res) {
						let data = JSON.parse(res.data);
						_this.pics.push(data.fileName);
					},
					fail: function(res) {
						uni.showToast({
							title:"上传失败",
							icon:'none'
						})
					}
				});
			})
		},
		getList(id){
			let _this = this;
			uni.request({
				url: this.$API.riskHandleCheck,
				data: {id},
				header: this.$API.get_head(),
				success: (res)=>{
					_this.list = res.data.data.map(item=>{
						item.checked = false;
						return item;
					});
				}
			});
		}
	}
}
</script>

<style scoped>
textarea{
	width: 100%;
	height: 120upx;
	font-size: 28upx;
	background: #F2F2F2;
	padding: 12upx 18upx;
	border-radius: 12upx;
	box-sizing: border-box;
}
.status_bar{
	height: var(--status-bar-height);
}
.body{
	height: calc(100vh - var(--status-bar-height));
}
.card{
	margin: 20upx;
	border-radius: 12upx;
	background: #fff;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view.name{
	height: 60upx;
	font-size: 32upx;
	text-indent: 24upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	margin-bottom: 20upx;
	position: relative;
}
.card .item::after{
	content: '';
	width: 100%;
	height: 100%;
	display: block;
	clear: both;
}

.card.list{
	padding: 20upx;
}
.card>.left{
	color: #000;
	width: 70upx;
	font-size: 40upx;
	font-weight: bold;
	padding-left: 10upx;
	box-sizing: border-box;
}
.card>.right{
	width: 100upx;
	text-align: right;
	padding-right: 10upx;
	box-sizing: border-box;
}
.card>.right image{
	width: 70upx;
	height: 70upx;
	border-radius: 10upx;
}
.card>.center{
	width: calc(100% - 170upx);
	border: 4upx dotted #fff;
	box-sizing: border-box;
	border-radius: 10upx;
	line-height: 1.2;
	font-size: 28upx;
	padding: 10upx;
}
.card>.center.error{
	border: 4upx dotted red;
}
.card>.center.red{
	color: red;
}

.btns{
	padding: 30upx 40upx 40upx;
}
.btns .btn{
	color: #fff;
	width: 260upx;
	height: 52upx;
	margin: 0 auto;
	font-size: 30upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	background-color: red;
}
</style>
